<template>
  <el-card>

    <el-divider content-position="left">SYSTEM</el-divider>

    <el-button type="warning" @click="logout" style="width: 100%;"><span>注销</span></el-button>

    <el-divider content-position="left">Table</el-divider>

    <el-collapse v-model="activeCollapse">
      <el-collapse-item title="Users" name="0">
        <Users></Users>
      </el-collapse-item>
      <el-collapse-item title="Menus" name="1">
        <Menus></Menus>
      </el-collapse-item>
      <el-collapse-item title="Files" name="2">
        <Files></Files>
      </el-collapse-item>
      <el-collapse-item title="Articles" name="3">
        <Articles></Articles>
      </el-collapse-item>
    </el-collapse>

  </el-card>

</template>

<script setup>
import Users from './Pages/Users.vue'
import Menus from './Pages/Menus.vue'
import Files from './Pages/Files.vue'
import Articles from './Pages/Articles.vue'

import {getCurrentInstance, reactive} from "vue";
import {userLogout} from "../assets/api";

const {proxy} = getCurrentInstance();

const activeCollapse = reactive('4');

// 注销
const logout = () => {
  userLogout().then(({data}) => {
    proxy.$router.push('/login');
  })
}

</script>

<style scoped>
/deep/.el-collapse,
/deep/.el-collapse-item__wrap{
  border: 0;
}
/deep/.el-collapse-item__header{
  background-color: #ecf0f1;
  color: #2980b9;
  border-top: 5px solid #ffffff;
  border-bottom: 5px solid #ffffff;
  padding: 0 20px;
}
</style>
